<template>
  <div class="bg">
    <navbar :show="show" />
    <h3>应急指挥调度平台</h3>
    <!-- <div class="list">
      <a v-for="item in list" :key="item.name" :href="item.url">
        <span />
        {{ item.name }}
      </a>
    </div> -->
    <div class="source">
      <el-row :gutter="40" class="list">
        <el-col v-for="item in systems" :key="item.dicValueText" :span="4" class="list-item">
          <a v-if="item.isLocal&&item.checked" :href="item.sysUrl" :class="item.dicValueCode">
            <span />
            <em>{{ item.dicValueText }}</em>
          </a>
          <a
            v-if="!item.isLocal&&item.checked"
            :href="item.sysUrl"
            class="notLocal"
            target="_blank"
            :class="{system9: item.dicValueCode == 'system9'}"
            :style="item.dicValueCode != 'system9' && {'background':`url(./img/${item.dicValueCode}.jpg)`}"
          >
            <span />
            <em>{{ item.dicValueText }}</em>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>

import { Navbar } from '@/views/layout/components'
import { mapGetters } from 'vuex'
export default {
  name: 'SelectPages',
  components: {
    Navbar
  },
  data() {
    return {
      show: false,
      list: [{
        name: '基础业务管理',
        url: 'system1.html'
      }, {
        name: '应急值守管理',
        url: 'system2.html'
      }, {
        name: '应急资源管理',
        url: 'system3.html'
      }, {
        name: '危险隐患管理',
        url: 'system4.html'
      }, {
        name: '应急预案管理',
        url: 'system5.html'
      }, {
        name: '应急科普子系统',
        url: 'system1.html'
      }, {
        name: '应急短信平台',
        url: 'http://222.190.243.177:5813/logon.do',
        temporary: true
      }, {
        name: '122社会联动平台',
        url: 'http://10.101.8.227',
        temporary: true
      }, {
        name: '城区防汛',
        url: 'http://www.njcqfxb.com',
        temporary: true
      }, {
        name: '地震应急平台',
        url: 'http://www.njdzzh.gov.cn/dzpt_main_dl.jsp?Nologin=true',
        temporary: true
      }, {
        name: '应急系统市委320',
        url: 'http://10.101.55.58:8080/dp/index.html',
        temporary: true
      }, {
        name: '江北新区',
        url: 'http://10.200.193.32:7081/fb-classic/screen.jsp',
        temporary: true
      }, {
        name: '智慧旅游大数据',
        url: 'http://218.94.79.6:8095/nanjingTourism/home',
        temporary: true
      }, {
        name: '南京地质灾害信息系统',
        url: 'http://180.96.21.198/dzzh',
        temporary: true
      }]
    }
  },
  computed: {
    ...mapGetters(['systems'])
  },
  created() {
    // var data = this.systems
    // console.log('data-------------', data)
    // this.list = data
  },
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter-----------', to, from)
    next(vm => {
    // 通过 `vm` 访问组件实例
      vm.$store.commit('SET_CHANGEPWDFLAG', false)
    })
  }
}

</script>
<style lang="scss" scoped>
.bg {
  width: 100vw;
  min-height: 100vh;
  background: #032e55;
  color: #fff;
  overflow:hidden;
}
h3 {
  padding:40px 0 40px 0;
  font-size: 80px;
  text-align: center;
  font-family: '黑体';
  font-weight: bold;
  margin-bottom: 30px 0 80px 0;
}
.source{
  padding:0 20px;
  width: 100%;
}
.list {
  // padding: 0 30px;
  // display: flex;
  // justify-content: space-around;
  a {
    position: relative;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 150px;
    border-radius: 5px;
    color: #fff;
    margin: 0 auto;
    &:hover {
      animation: heartBeat 1s;
    }
    em {
      height: 50px;
      line-height: 50px;
      background: rgba(0, 0, 0, .75);
      color: #fff;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      font-style: normal;
      border-radius: 0 0 4px 4px ;
      font-size: 20px;
    }
    span {
      margin: 0 auto;
      padding-top: 20px;
      padding-bottom: 15px;
      display: block;
      width: 100px;
      height: 115px;
    }
  }
}
.list-item {
  text-align: center;
  margin-bottom: 20px;
  // a {
  //   background: #fca754;
  //   span {
  //     background: url('./../../static/sprite.png') -19px -21px no-repeat;
  //   }
  // }
  .system1  {
    background: #fca754;
    span {
      background: url('./../../static/sprite.png') -19px -21px no-repeat;
    }
  }
  .system3 {
    background: #06d0ec;
    span {
      background: url('./../../static/sprite.png') -107px -21px no-repeat;
    }
  }
  .system2 {
    background: #1db9a4;
    span {
      background: url('./../../static/sprite.png') -204px -21px no-repeat;
    }
  }
  .system4 {
    background: #e23d47;
    span {
      background: url('./../../static/sprite.png') -320px -21px no-repeat;
    }
  }
  .system5 {
    background: #40d37a;
    span {
      background: url('./../../static/sprite.png') -445px -21px no-repeat;
    }
  }
  .system6 {
    background: #0383fe;
    span {
      background: url('./../../static/sprite.png') -571px -21px no-repeat;
    }
  }
  .system8 {
    background: #0383fe;
    span {
      background: url('./../../static/sprite.png') -320px -21px no-repeat;
    }
  }
  .system9 {
    background: #0383fe;
    span {
      background: url('./../../static/sprite.png') -571px -21px no-repeat;
    }
  }
  .system10 {
    background: #0383fe;
    span {
      background: url('./../../static/sprite.png') -571px -21px no-repeat;
    }
  }
// 暂时写死
  .notLocal {
    background-size: 100% 100%;
  }
  // &:nth-child(7) a {
  //   background: url('./../../static/newphotos/1.jpg') no-repeat;
  //   background-size: 100% 100%;
  // }
  // &:nth-child(8) a {
  //   // color: #f10;
  //   background: url('./../../static/newphotos/2.jpg') no-repeat;
  //   background-size: 100% 100%;
  // }
  // &:nth-child(9) a {
  //   background: url('./../../static/newphotos/3.jpg') no-repeat ;
  //   background-size: 100% 100%;
  // }
  // &:nth-child(10) a {
  //   // color: #f11;
  //   background: url('./../../static/newphotos/4.jpg') no-repeat;
  //   background-size: 100% 100%;
  //   span {
  //     color: #333 !important;
  //   }
  // }
  // &:nth-child(11) a {
  //   // color: #f44;
  //   background: url('./../../static/newphotos/5.jpg') no-repeat;
  //   background-size: 100% 100%;
  // }
  // &:nth-child(12) a {
  //   background: url('./../../static/newphotos/6.jpg') no-repeat;
  //   background-size: 100% 100%;
  // }
  // &:nth-child(13) a {
  //   background: url('./../../static/newphotos/7.jpg') no-repeat;
  //   background-size: 100% 100%;
  // }
  // &:nth-child(14) a {
  //   // color: #f33;
  //   background: url('./../../static/newphotos/8.jpg') no-repeat;
  //   background-size: 100% 100%;
  // }
}
</style>
